/*
 *新建项目页面文件
 */
'use strict';
import React, { Component } from 'react';
import { Link, browserHistory } from 'react-router';
import { connect } from 'react-redux';
import { Row, Col, InputNumber, Button, Card, Breadcrumb, Input, Form, Select, DatePicker, message} from 'antd';
import {regionArray,projectData,endexData,analysisJson,adminUser,dynamic} from '@app/constants/DataSource.jsx';
const FormItem = Form.Item;
const Option = Select.Option;
const { TextArea } = Input;
const {RangePicker} = DatePicker;
class projectForm extends Component {
  constructor(props) {
    super(props);
    this.state = {
      loading:true,
      confirmDirty: false,
      autoCompleteResult: [],
      startDate:'',
      endDate:''
    };
  }

  componentDidMount(){
    setTimeout(() => {
    this.setState({loading:false});
    },300);
  }

  onChange = (date, dateString) => {
    this.setState({startDate:dateString[0],endDate:dateString[1]});
  }

  handleSubmit = (e) => {
    e.preventDefault();
    this.props.form.validateFieldsAndScroll((err, values) => {
      if (!err) {
        let key = projectData.length;
        let state = 0;
        let name = adminUser.name;
        let process = values.initial;
        let startDate = this.state.startDate+' 00:00:00';
        let endDate = this.state.endDate+' 23:59:59';
        let data = [];
        let capitalIng = values.capitalAll;
        dynamic.unshift({
          name,
          title:values.title,
          action:'新建了',
          flag:true,
          date:startDate,
          key:dynamic.length
        });
        projectData.push({...values,key,state,name,process,startDate,endDate,data,capitalIng});
        browserHistory.push('/ProjectTeam');
        message.success('新建成功');
      }
    });
  }
   
  render() {  
    const { getFieldDecorator } = this.props.form;
    const { autoCompleteResult } = this.state;
    const formItemLayout = {
      labelCol: {
        xs: { span: 24 },
        sm: { span: 8 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 },
      },
    };
    const tailFormItemLayout = {
      wrapperCol: {
        xs: {
          span: 24,
          offset: 0,
        },
        sm: {
          span: 16,
          offset: 8,
        },
      },
    };
    const userList = [];
    endexData[analysisJson.region].user.map((i,index) => {
      userList.push(<Option key={index} value = {i.name}>{i.name}</Option>);
    });
      

    return (
      <div className = 'projectForm'>
        <Card>
          <Breadcrumb>
            <Breadcrumb.Item><Link to = '/Analysis'>首页</Link></Breadcrumb.Item>
            <Breadcrumb.Item>新建项目</Breadcrumb.Item>
          </Breadcrumb>
          <p style = {{fontSize:20,paddingTop:20}}>新建项目</p>
        </Card>
        <Card style = {{marginTop:20}}>
          <Row>
            <Col span = {12} offset = {5}>
              <Form onSubmit={this.handleSubmit}>
                <FormItem
                  {...formItemLayout}
                  label="项目名称"
                >
                  {getFieldDecorator('title', {
                    rules: [{
                      required: true, message: '请输入项目名称',
                    }],
                  })(
                    <Input placeholder = '请输入项目名称'/>
                  )}
                </FormItem>
                <FormItem
                  {...formItemLayout}
                  label="项目类型"
                >
                  {getFieldDecorator('type', {
                    rules: [{
                      required: true, message: '请选择项目类型',
                    }],
                  })(
                    <Select placeholder="请选择项目类型">
                      <Option value="空气">空气</Option>
                      <Option value="污染">污染</Option>
                      <Option value="土质">土质</Option>
                      <Option value="水质">水质</Option>
                    </Select>
                  )}
                </FormItem>
                <FormItem
                  {...formItemLayout}
                  label="初始分数"
                >
                  {getFieldDecorator('initial', {
                    rules: [{
                      required: true, message: '请输入初始分数',
                    }],
                  })(
                    <InputNumber min = {0} max = {100}  placeholder = '请输入'/>
                  )}
                </FormItem>
                <FormItem
                  {...formItemLayout}
                  label="目标分数"
                >
                  {getFieldDecorator('target', {
                    rules: [{ required: true, message: '请输入目标分数' }],
                  })(
                    <InputNumber min = {0} max = {100} placeholder = '请输入'/>
                  )}
                </FormItem>
                <FormItem
                  {...formItemLayout}
                  label="资金"
                >
                  {getFieldDecorator('capitalAll', {
                    rules: [{ required: true, message: '请输入资金' }],
                  })(
                    <InputNumber min = {0} max = {10000} placeholder = '请输入'/>
                  )}
                </FormItem>
                <FormItem
                  {...formItemLayout}
                  label="开始和结束时间"
                >
                  {getFieldDecorator('time', {
                    rules: [{ required: true, message: '请选择开始和结束时间' }],
                  })(
                   <RangePicker onChange={this.onChange}/>
                  )}
                </FormItem>
                <FormItem
                  {...formItemLayout}
                  label="成员"
                >
                  {getFieldDecorator('user', {
                    rules: [{ required: true, message: '请至少选择一个成员' }],
                  })(
                    <Select
                      mode="multiple"
                      placeholder="请选择成员"
                    >
                      {userList}
                    </Select>
                  )}
                </FormItem>
                <FormItem
                  {...formItemLayout}
                  label="描述"
                >
                  {getFieldDecorator('task', {
                    rules: [{ required: true, message: '请输入描述' }],
                  })(
                    <TextArea rows={4} placeholder = '请输入描述'/>
                  )}
                </FormItem>
                <FormItem {...tailFormItemLayout}>
                  <Button type="primary" htmlType="submit">新建</Button>
                </FormItem>
              </Form>
            </Col>
          </Row>
        </Card>
      </div>
    );
  }
}

const ProjectForm = Form.create()(projectForm);
function mapStateToProps(state) {
  return {
   
  }
}
export default connect(
  mapStateToProps, {
    
  }
)(ProjectForm)
